<template>
  <q-page class="q-pa-sm" style="min-height: 100%">
    <div class="row">
      <div>Settings</div>
      <q-space></q-space>
      <q-btn dense flat icon="mdi-menu" padding="none" size="12px">
        <q-menu class="shadow-5" content-class="bg-black text-white">
          <q-list dense style="min-width: 168px;font-size:12px">
            <div class="row">
              <q-space />
              <div style="font-size:9px;line-height: 12px">Art talk for everyone</div>
            </div>
            <q-separator />
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 20px;padding-right:6px!important"
              >
                <q-icon name="mdi-bug" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>Feedback/Bug Report</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </div>
    <div class="q-pa-xs column q-gutter-xs">
      <!-- <div class="col">
        <div
          class="setting-item row items-center q-my-xs"
          v-for="item in settings"
          :key="item.name"
        >
          <q-avatar class="q-mx-sm" square size="32px">
            <q-icon size="24px" :name="item.icon" :color="item.color" />
          </q-avatar>
          <div>{{item.name}}</div>
        </div>
      </div>-->
      <q-btn
        color="dark"
        v-for="item in settings"
        :key="item.name"
        :label="item.name"
        :icon="item.icon"
        :text-color="item.color"
        align="left"
        size="md"
        padding="15px 20px"
      ></q-btn>
    </div>
  </q-page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component({})
export default class Settings extends Vue {
  private settings = [
    {
      name: 'ACCOUNT SETTINGS',
      icon: 'mdi-account',
      color: 'secondary',
    },
    {
      name: 'DEVICE SETUP',
      icon: 'mdi-cellphone-cog',
      color: 'yellow',
    },
    {
      name: 'APPEARANCE',
      icon: 'mdi-auto-fix',
      color: 'primary',
    },
    {
      name: 'PROGRAM SETTINGS',
      icon: 'mdi-cog',
      color: 'info',
    },
    {
      name: 'PRIVACY POLICY',
      icon: 'mdi-information',
      color: 'orange',
    },
    {
      name: 'HELP',
      icon: 'mdi-help-circle',
      color: 'purple',
    },
  ];
}
</script>
<style lang="stylus" scoped>
.setting-item {
  height: 46px;
  background-color: $dark;
  border-radius: 2px;
}
</style>
